<!DOCTYPE html>
<html>
    <div>
        <head>
            <link rel="stylesheet" href="./public.css">
            <style>
                h1,h2{
                    color:#ff0000;
                    text-align: center;
                }

                .first{
                    color:hsl(131, 46%, 36%);
                }
                .size{
                    font-size:30px;
                }
                #only,#one{
                    color:#9797ec;
                    font-weight: 700;
                    font-family: "微软雅黑";
                    text-indent: 30px;
                }
                table{
                    border-collapse: collapse;
                }
                table,td{
                    border:3px solid green;
                }
                td{
                    text-align: center;
                    vertical-align: middle;
                    background-color: hwb(120 86% 0%);
                    color:#9797ec;
                    padding:20px;
                }
                .container{
                    width:500px;
                    height:500px;
                    background-color: cadetblue;
                    position:relative;
                    left:10px;
                }
                .box1{
                    height:200px;
                    width:200px;
                    margin:5px;
                    background-color: red;
                    position:absolute;
                    left:100px;
                    top:100px;
                    box-shadow: 10px 10px 20px rgb(92, 49, 49);
                    animation:anim 2s linear 0s infinite;
                }
                .text{
                    height:200px;
                    width:200px;
                    background-color: cornsilk;
                    clear:both;
                    position:fixed;
                    right:100px;
                    bottom:100px;
                }
                /*div:hover{
                    background-color: #9797ec;
                }*/
                @keyframes anim{
                    0%{
                        width:200px;
                        height:200px;
                    }
                    50%{
                        width:400px;
                        height:400px;
                    }
                    100%{
                        width:200px;
                        height:200px;
                    }
                }
            </style>
        </head>
        <body>
            <h1>XZ_1005</h1>
            <img src="1.jpg" alt="肖战" width="200px" title="肖战">
            <img src="./b1.jpg" alt="" width="200px">
            <img src="./b2.webp" alt="" width="200px">
            <img src="./b3.avif" alt="" width="200px">
            <img src="./b4.avif" alt="" width="200px">
            <img src="./images/3.jpg" alt="" width="200px">
            <br>
            <a href="https://cn.bing.com/images/search?q=%e8%82%96%e6%88%98&form=HDRSC2&first=1"><i class="first size">肖战1005</i></a>
            <br>
            <ol type="a">
                <li><em class="first">em热爱可抵岁月漫长</em>
                    <ol>
                        <li id="only">想要的靠自己的努力去争取，不走歪门邪道</li>
                        <li id="one">世上熙熙攘攘阳关道，我偏要一条独木桥走到黑</li>
                    </ol>
                </li>
                <li><i class="first">i热爱可抵岁月漫长</i>
                <ul type="disc">
                    <li>ul内嵌li,表示无序列表</li>
                    <li>比鬼神更可怕的是人心</li>
                    <li>人生不是轨道，而是旷野</li>
                </ul>
                </li>
                <li><strong class="first">strong热爱可抵岁月漫长</strong>
                <table>
                    <tr>
                        <td>表格</td>
                        <td>tr表示行</td>
                    </tr>
                    <tr>
                        <td>td表示列</td>
                        <td>border表示表格边框,可带可不带</td>
                    </tr>
                </table>
                </li>
                <li><b>b表单元素:表单标签、表单域、表单按钮</b>
                <form>
                    用户名：<input type="text">
                    <br>
                    密码：<input type="password">
                    <br>
                    <input type="submit" value="登录">
                </form>
                </li>
                <li><span>span热爱可抵岁月漫长</span></li>
                <li><del>del热爱可抵岁月漫长</del></li>
                <li>ol内嵌li,表示序号和列表</li>
            </ol>
            <div class="container">
                <div class="box1"></div>
                <div class="text"></div>
            </div>
        </body>
    </div>
    
</html>